<template>
  <div
    class="breadcrumb f f-jc f-ac"
    :class="{
      border: border,
    }"
    :style="{
      height: height + 'px',
    }"
  >
    <div class="breadcrumb-body">
      <el-breadcrumb :separator-class="icon" :separator="separator">
        <el-breadcrumb-item
          v-for="(i, k) in routeList"
          :key="k"
          :to="{ path: i.path ? i.path : '' }"
          :replace="replace"
        >
          {{ i.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 启用路由
    router: {
      type: Boolean,
      default: false,
    },
    // 高度
    height: {
      type: [String, Number],
      default: 46,
    },
    // 替换跳转
    replace: {
      type: Boolean,
      default: false,
    },
    // 图标分隔符
    icon: {
      type: String,
      default: "el-icon-arrow-right",
    },
    // 分隔符 需将icon置空
    separator: {
      type: String,
      default: "/",
    },
    // 边框线
    border: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      routeList: [],
    };
  },
  mounted() {
    this.getBreadcrumb();
  },
  watch: {
    "$route.path"() {
      this.getBreadcrumb();
    },
  },
  methods: {
    getBreadcrumb() {
      // 获取路由列表
      let current = this.$route;
      let list = current.matched;
      this.routeList = list.map((i) => {
        if (this.router) {
          return {
            path: i.path || "/",
            label: i.meta.title || "-",
          };
        } else {
          return {
            label: i.meta.title || "-",
          };
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.breadcrumb {
  width: 100%;
  &-body {
    width: 1200px;
  }
}
.border {
  border-bottom: 1px solid #b6b6b6;
}
::v-deep .el-breadcrumb__item {
  .el-breadcrumb__inner {
    font-weight: 400;
    font-size: 14px;
    color: #909090;
    &:hover {
      color: #909090;
    }
  }
  &:last-child {
    .el-breadcrumb__inner {
      color: #193980;
    }
  }
}
</style>
